<template> 
    <!-- 默认横线 灰色模块样式type="border-card"  无色模块样式type="card"-->
    <el-tabs v-model="data.activeTab" @tab-click="handleTabClick" type="card" :key="data.isUpdate" >
        <!-- <el-tab-pane v-for="(tab, index) in data.tabs" :key="index" :label="tab.label" :name="tab.name">
        {{ tab.content }}
        </el-tab-pane> -->
        <el-tab-pane label="用户管理" name="first" width="180px">
            <userList></userList>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="two" >
            <role ></role>
        </el-tab-pane>
        <el-tab-pane label="菜单管理" name="three" >
            3
        </el-tab-pane>
    </el-tabs>
</template>
<script setup lang="ts">  
import userList from './userlist.vue'
import role from './role.vue'
    import { reactive,ref } from 'vue'   
    const data = reactive<any>( { 
        activeTab: 'first',  
        isUpdate:false,
    }) 
    function handleTabClick(tab) {
        data.activeTab = tab.name;
        // data.isUpdate = !data.isUpdate
    }
    
</script>
<style lang="less" scoped >
    ::v-deep .el-tabs__item.is-active{
        background: #fff;
    }
    ::v-deep .el-tabs__header{
        height: 50px; 
    }
    ::v-deep .el-tabs__item{
        width: 130px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        font-size: 18px;
    }

</style>